Menú vertical-transform

No todos los menús deben ser horizontales ni tampoco las etiquetas deben ser una nube, un menú vertical también nos ayuda a mantener ordenado nuestro espacio.

Los enlaces van a gusto y necesidad de cada uno si no tenemos demasiadas etiquetas un menú vertical es una forma vistosa de mostrarlas. Aunque, lo más usual es que nuestro menú sea simplemente una tarjeta de presentación donde irá nuestro mail, perfil, portfolio.

¿Y por qué no? los sitios para localizarnos o dicho de otro modo las ya imprescindibles redes sociales.

Nuestro menú tiene un efecto que se consigue con la propiedad transform ¿quieren saber que es con lujo de detalles? el post "Transformaciones con CSS"de Vagabundia nos lo aclara y muestra lo que podemos llegar conseguir.

Para los que quieren un menú sin efecto simplemente eliminando la propiedad en los estilos de transform li:hover es suficiente.Los colores y tamaño no es problema, ya está marcado el lugar para cambiar si así se desea.

Vamos a simplificar la tarea y para eso incluimos todo lo necesario en un gadget de HTML, al terminar guardamos los cambios y arrastramos el gadget al lugar indicado.

Hay que tener en cuenta que dependiendo de la anchura de nuestra sidebar es el ancho que debemos dar a nuestro menú.

Y este es el contenido del gadget.

<style>#transform ul {
background: none repeat scroll 0 0 transparent;
list-style: none outside none;
}
#transform ul li {
background: url("url-imagen") repeat scroll #B599C1; /* imagen y color de fondo */
border-bottom: 1px solid #fff; /* borde inferior */
color: #ffffff; /* color texto */
text-shadow: 1px 2px 2px #505050; /* sombra del texto */
list-style: none outside none;
padding: 5px; /* separación texto y borde */
width: 230px; /* ancho del menú */
}
#transform li a:link {
color: white; /* color enlace */
}
#transform li:hover {
-moz-transform: scale(1.15); /* efecto hover transform */
background-color: #6F4062; /* color de efecto hover */
}
</style>

<div class="text-align:center;">
<div id="transform">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Enlace 1</a></li>
<li><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>
<li><a href="#">Enlace 4</a></li>
</ul>
</div></div>

Configuramos los enlaces de la siguiente forma:
<a href="#">Enlace 1</a>

Sustituimos la almohadilla por la url del sitio a enlazar y el texto Enlace 1-2-3 y 4 por el texto que hace de enlace.